<template>
  <!-- <span>Information Technology全称</span> -->
  <el-card>
    <el-row>
      <el-col :span="15">
        <div>
          <el-input v-model="data.name" style="width: 220px;margin-bottom: 20px;" placeholder="请输入姓名" clearable />
          <el-input v-model="data.phone" style="width: 220px;margin-bottom: 20px; margin-left: 20px;" placeholder="请输入手机号" clearable />
          <el-button type="primary" style="margin-bottom: 20px;margin-left: 20px;" @click="load">查 询</el-button>
          <el-button type="warning" style="margin-bottom: 20px;margin-left: 20px;" @click="reset">重 置</el-button>
          <el-button type="info" style="margin-bottom: 20px;margin-left: 20px;" v-if="useUserStore().user.departmentId == 1 || useUserStore().user.departmentId == null" @click="exportData"><el-icon><Download /></el-icon>导出</el-button>

          <el-table :data="data.tableData" style="width: 100%">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="name" label="姓名" />
            <el-table-column prop="sex" label="性别">
              <template #default="scope">
                <el-tag type="primary">{{ scope.row.sex == 1 ? "男" : "女" }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="position" label="职位">
              <template #default="scope">
                <el-tag type="primary" v-if="scope.row.positionId === 1">管理员</el-tag>
                <el-tag type="primary" v-if="scope.row.positionId === 2">总经理</el-tag>
                <el-tag type="primary" v-if="scope.row.positionId === 3">经理</el-tag>
                <el-tag type="primary" v-if="scope.row.positionId === 4">员工</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="phone" label="手机号" />
            <el-table-column prop="createDate" label="入门时间">
              <template #default="scope">
                {{ scope.row.createDate.substring(0, 11) }}
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="prop" label="职责">
              <template #default="scope">
                <el-tag type="success" v-if="scope.row.dutyId === 1">前端工程师</el-tag>
                <el-tag type="success" v-if="scope.row.dutyId === 2">后端工程师</el-tag>
                <el-tag type="success" v-if="scope.row.dutyId === 3">数据库管理员</el-tag>
                <el-tag type="success" v-if="scope.row.dutyId === 4">测试工程师</el-tag>
                <el-tag type="success" v-if="scope.row.dutyId === 5">网络工程师</el-tag>
                <el-tag type="success" v-if="scope.row.dutyId === 6">实施技术员</el-tag>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="prop" label="提 示">
              <template #default="scope">
                <span v-if="data.press.some(item => item.employeeId === scope.row.id)"><el-icon color="red">
                    <AlarmClock />
                  </el-icon><el-icon><ChatDotRound /></el-icon></span>
              </template>
            </el-table-column>
            <el-table-column header-align="center" align="center" prop="prop" label="操作">
              <template #default="scope">
                <el-button type="primary" @click="sendTip(scope.row)"><el-icon style="margin-right: 5px;">
                    <WarningFilled />
                  </el-icon>催促</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div>
          <div class="demo-pagination-block">
            <div style="margin-top: 20px;"></div>
            <el-pagination v-model:current-page="data.pageNum" v-model:page-size="data.pageSize" @current-change="load"
              @size-change="load" :page-sizes="[8, 10, 12]" background layout="total, sizes, prev, pager, next, jumper"
              :total="data.total">
            </el-pagination>
          </div>
        </div>
      </el-col>


      <el-col :span="1">
        <!-- 分界线 -->
        <div style="height: 100%;border: 2px solid #DDDEE0; width: 1px;margin-left: 15px;border-radius: 12px;"></div>
      </el-col>

      <el-col :span="8">
        <div style="width: 522px; height: 750px; overflow-y: auto; box-sizing: border-box;">
          <span style="color: #47B7D4;">IT部门</span>
          <div style="margin-top: 10px;">
            <!-- <img style="width: 100%; height: 40%;" src="/src/assets/it.png" alt=""> -->
            <el-image :src="img1" style="width: 100%; height: 40%;" :preview-src-list="[img1,img2,img3]" />
          </div>
          <div style="margin-top: 50px;">
            <div id="duty" style="width: 500px; height: 400px; box-sizing: border-box;"></div>
          </div>
        </div>
      </el-col>
    </el-row>
  </el-card>

  <el-dialog v-model="data.centerDialogVisible" title="发送催促通知" width="500" align-center>
    <span style="color: #2196F3;">工作虽累，但准时到达是对自己的承诺。加油！</span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="data.centerDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="press">
          确定
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getAllPress, pressById, selectAllPage, selectDutyCount } from '@/api/it';
import { onMounted, reactive } from 'vue';
import { Message, Memo, InfoFilled, WarningFilled, AlarmClock, ChatDotRound, Download } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from 'element-plus';
import * as echarts from "echarts"; //引入 --- echarts
import img1 from '@/assets/it.png'
import img2 from '@/assets/it2.png'
import img3 from '@/assets/it3.png'
import { useUserStore } from '@/stores/user';

const data = reactive({
  tableData: [], //所有同部门的人员   部门==>It
  pageNum: 1,
  pageSize: 10,
  name: '',
  phone: '', 

  centerDialogVisible: false, //催促 的提示框
  employeeId: null, //被催促人的id

  press: [], //被催促的全部信息
});

const deploy = {
  name: '部门',
  children: [
    {
      name: '数据库管理员',
      children: [
        { name: '数据库架构师', value: 1555 },
        { name: '数据库安全专家', value: 3322 }
      ]
    },
    {
      name: '技术支持',
      children: [
        { name: '项目经理', value: 8833 },
        { name: '实施技术员', value: 8833 },
        { name: '网络工程师', value: 2000 },
        { name: '云服务工程师', value: 3623 },
      ]
    },

    {
      name: '软件工程师',
      children: [
        { name: '前端工程师', value: 3240 },
        { name: '后端工程师', value: 2732 },
      ]
    },
    {
      name: '测试团队',
      children: [
        { name: '软件测试工程师', value: 1821 },
        { name: ' 测试协调员', value: 5833 }
      ]
    }
  ]
}

const option = {
  tooltip: {
    trigger: 'item',
    triggerOn: 'mousemove'
  },
  series: [
    {
      type: 'tree',
      data: [deploy],  //数据配置到这里
      top: '10%',
      left: '8%',
      bottom: '22%',
      right: '20%',
      symbolSize: 7,
      edgeShape: 'polyline',
      edgeForkPosition: '63%',
      initialTreeDepth: 3,
      lineStyle: {
        width: 2
      },
      label: {
        backgroundColor: '#fff',
        position: 'left',
        verticalAlign: 'middle',
        align: 'right'
      },
      leaves: {
        label: {
          position: 'right',
          verticalAlign: 'middle',
          align: 'left'
        }
      },
      emphasis: {
        focus: 'descendant'
      },
      expandAndCollapse: true,
      animationDuration: 550,
      animationDurationUpdate: 750
    }
  ]
}

const press = async () => {
  data.centerDialogVisible = false
  console.log(data.employeeId)

  await pressById(data.employeeId).then(res => {
    if (res.data.code == '200') {
      ElMessage.success('催促成功');
    } else {
      ElMessage.error('系统有误');
    }
  })
}

const exportData = () => {
  ElMessageBox.confirm("你确认导出当前部门人员信息吗?",'导出', {type: 'warning', cancelButtonText: '取消', confirmButtonText: '确认', showClose: false }).then(() => {
    window.open('http://localhost:8888/it/export')
  }).catch()
}

const sendTip = (row) => {
  console.log(row)
  data.centerDialogVisible = true
  data.employeeId = row.id
}

const reset = () => {
  data.name = ''
  data.phone = ''
  load()
}

const load = async () => {
  await selectAllPage(data.pageNum, data.pageSize, data.name, data.phone).then(res => {
    data.tableData = res.data.data.list
    data.total = res.data.data.total
  })

  await getAllPress().then(res => {
    data.press = res.data.data
  })

  await selectDutyCount().then(res => {
    console.log(res);
    let data = res.data.data.map((item) => {
        return {
            value: item.total,
            name: item.name,
        }
    })
    //处理 数据 汇总成 ---> echarts
    let manager = []
    manager[0] = data[2]
    manager[1] = data[9]
    deploy.children[0].children = manager
    let technology = []
    technology[0] = data[5]
    technology[1] = data[6]
    technology[2] = data[4]
    technology[3] = data[9]
    deploy.children[1].children = technology
    let engineer = []
    engineer[0] = data[0]
    engineer[1] = data[1]
    deploy.children[2].children = engineer
    let test = []
    test[0] = data[3]
    test[1] = data[8]
    deploy.children[3].children = test
  })

  const myChart = echarts.init(document.getElementById("duty"))
  myChart.setOption(option)
};

onMounted(() => {
  load()
})
</script>

<style scoped>
.demo-pagination-block+.demo-pagination-block {
  margin-top: 10px;
}

.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}

/* 针对WebKit浏览器（如Chrome、Safari） */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1f1;
}

::-webkit-scrollbar-thumb {
  background-color: #888;
  border-radius: 6px;
  border: 3px solid #fff;
}

::-webkit-scrollbar-thumb:hover {
  background-color: #555;
}
</style>